<template>
	<view>
		<view class=" mainpadding">
			<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
				placeholder="請輸入蒐索內容" v-model="keyname" @confirm="searchGoods"></u--input>
			<view class="flexbetween margin_top">
				<view class="flexcenter" @click="selectCom(0)">
					<view :class="type==0?'hei_text main_size bold':'hui_text main_size bold'">銷售排序</view>
				</view>
				<view class="flexcenter" @click="selectCom(1)">
					<view :class="type==1?'hei_text main_size bold':'hui_text main_size bold'">庫存</view>
				</view>
				<view class="flexcenter" @click="selectCom(2)">
					<view :class="type==2?'hei_text main_size bold':'hui_text main_size bold'">叫貨</view>
				</view>
				<view class="flexcenter" @click="selectCom(3)">
					<view :class="type==3?'hei_text main_size bold':'hui_text main_size bold'">超過保鮮期</view>
				</view>
			</view>
			<view class="margin_top">
				<scroll-view class="white_nowrap" scroll-x>
					<view class="flexleft">
						<view class="margin_right2" v-for="(item,index) in shop_class">
							<view :class="item.isChecked?'cateSelect':'cateNoSelect'" @click="selectCate(item)">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flexbetween margin_top">
				<view class="main_size hei_text bold" @click="messageTime.timeShow=true">{{start_time || "開始時間"}}-{{end_time || "結束時間"}}</view>
				<view class="hui_text bold main_size flexright" @click="show=true">
					<view>低於庫存</view>
					<u-icon name="arrow-down" color="#999" size="12"></u-icon>
				</view>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="jumpurl(`/pages/workbench/tianjiasp?goodsId=${item.id}`)">
				<view class="flexleft" style="width: 100%;">
					<view class="listleftimg radius margin_right">
						<image class="listleftimg radius" :src="item.logoimage_text" mode=""></image>
					</view>
					<view style="width: 100%;">
						<view class="hei_text main_size bold">{{item.goods_name}}</view>
						<view class="xiaohong margin_top1 main_size">${{item.gprice*item.total_sales}}</view>
						<view class="flexbetween margin_top1">
							<view class="flexleft">
								<view class="xiaohuang margin_right1">庫存：{{item.end_num==-1?"不限":item.end_num}}</view>
								<view class="xiaohuang">銷量：{{item.total_sales || 0}}</view>
							</view>
							<view class=""  @click.stop="phone(item.goods.phone)">
 								<u-icon name="phone" color="#FFB800" size="20"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="低於庫存" confirmColor="#FFB800" @confirm="confirmnum" closeOnClickOverlay confirmText="確認" cancelText="取消"
			@close="show=false">
			<view class="slot-content mainpadding_top" style="width: 100%;">
				<input type="number" class="margin_top huang_text main_size" style="text-align: center;" v-model="num"
					placeholder="請輸入庫存數(展示小於輸入數值)">
			</view>
		</u-modal>
		<timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				num: "",
				start_time: "",
				end_time: "",
				messageTime: {
					mode: "date",
					timeShow: false,
					title: "請選擇開始時間"
				},
				shop_class: [],
				shopclassify_id:0,
				type:0,
				keyname:""
			}
		},
		onShow() {
			this.start_time = this.http.returnDate(Number(new Date()))
			this.end_time = this.http.returnDate(Number(new Date()))
			this.init()
			this.getGoodsCate()
		},
		methods: {
			
			searchGoods(){
				this.list = {
					data: []
				}
				this.init();
			},
			selectCom(val){
				this.type = val
			},
			getGoodsCate() { //商品分类
				let _this = this
				this.http.request('/api/shop/shopCategory', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),	
				}).then(res=>{
					if (res.data.length) {
						res.data.forEach(item => {
							this.$set(item, "isChecked", false)
						})
						res.data.unshift({
							id: "",
							name: "全部",
							isChecked: true
						})
					} else {
						res.data = [{
							id: "",
							name: "全部",
							isChecked: true
						}]
					}
					this.shop_class = res.data
				})
			},
			selectCate(value) { //商品選擇分類
				this.shop_class.forEach(item => {
					item.isChecked = false
				})
				value.isChecked = true
				this.shopclassify_id = value.id;
				// this.page = 1
				this.list = {
					data: []
				}
				this.init();
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			timeConfirm(e) {
				if(this.messageTime.title == "請選擇開始時間"){
					this.start_time = e
					setTimeout(()=>{
						this.messageTime.title  = "請選擇結束時"
						this.messageTime.timeShow = true
					},100)
				}else{
					this.messageTime.title = "請選擇開始時間"
					this.end_time = e
					this.init()
				}
				
			},
			confirmnum() {
				this.show = false
				this.init()
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
					start_time:this.start_time? Number(new Date(this.start_time)) / 1000:"",
					end_time: this.end_time?(Number(new Date(this.end_time))+60*1000*60*24) / 1000:"",
					shopclassify_id:this.shopclassify_id,
					keywords:this.keyname,
					page: page || 1,
					limit: 12,
				}
				let url = '/api/shop/goods_timesx'
				// if (val == 2) {
				// 	url = '/api/shop/goods_numsx'
				// 	data = {
				// 		shop_id: uni.getStorageSync("shop_id"),
				// 		num: this.num
				// 	}
				// }
				this.http.request(url, 'POST', data, false, false, true).then(res => {
					// res.data.forEach(item => {
					// 	item.logoimage = this.imgUrlUser + item.logoimage
					// })
					// this.list.data = res.data
					
					if(res.code==1){
						
						let resList = res.data;
						let dataList = _this.list;
						
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					} else if (res.code == 0) {
						this.list.data = []
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				
					
					
				}).catch(err => {
					this.http.toast(err.msg);
				})
			},
			
			
			onReachBottom() {
				console.log(this.page);
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.leftsmall {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
	}
</style>